<template>
  <div class="dashboard">
    <el-backtop :visibility-height="100"></el-backtop>
    <el-row type="flex" justify="space-around" class="row-title">
      <img src="@/assets/images/1.png" alt=""/>
      <img src="@/assets/images/2.png" alt=""/>
    </el-row>
    <el-row class="notice">
      <el-col class="notice-card">
        <el-card shadow="hover" style="border-radius: 15px">
          <div slot="header">
            公告
            <el-button style="float: right; padding: 3px 0;color: #28b8b8;" type="text"
                       @click="openAnyNotice('notice')">更多公告
            </el-button>
          </div>
          <div v-for="notice in frontend.notices" :key="notice.id" class="text item">
            <el-row type="flex" justify="space-between">
              <div style="width: 75%;overflow: hidden;">
                <el-button class="link" type="text" style="width: 95%;" @click="handlePreviewNotice(notice.id)">
                  <div style="text-overflow:ellipsis;white-space: nowrap;overflow: hidden;text-align: left">
                    {{ notice.notice_title }}
                  </div>
                </el-button>
              </div>
              <div style="font-size: 14px;display: flex;align-items: center">
                <i class="el-icon-date">{{ msToDate(notice.create_time).withoutTime }}</i>
              </div>
            </el-row>
          </div>
        </el-card>
      </el-col>
      <el-col class="notice-card">
        <el-card shadow="hover" style="border-radius: 15px">
          <div slot="header">
            通知
            <el-button style="float: right; padding: 3px 0;color: #28b8b8;" type="text"
                       @click="openAnyNotice('inform')">更多通知
            </el-button>
          </div>
          <div v-for="notice in frontend.informs" :key="notice.id" class="text item">
            <el-row type="flex" justify="space-between">
              <div style="width: 75%;overflow: hidden;">
                <el-button class="link" type="text" style="width: 95%;" @click="handlePreviewNotice(notice.id)">
                  <div style="text-overflow:ellipsis;white-space: nowrap;overflow: hidden;text-align: left">
                    {{ notice.notice_title }}
                  </div>
                </el-button>
              </div>
              <div style="font-size: 14px;display: flex;align-items: center">
                <i class="el-icon-date">{{ msToDate(notice.create_time).withoutTime }}</i>
              </div>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-container class="career-online">
      <el-header class="career-online-header animate__animated animate__flipInY">在招职位</el-header>
      <el-main class="career-online-main">
        <!-- 在招岗位 -->
        <el-tabs class="tabs">
          <el-tab-pane label="在招职位" class="tab-pane">
            <el-card class="box-card" v-for="(data,index) in frontend.careerList" :key="index" shadow="hover">
              <el-row>
                <el-col class="job-info">
                  <el-row type="flex" justify="space-between">
                    <el-col>
                      <router-link class="link" :to="{name: 'Info', query: {id: data.id}}">{{ data.name }} <i
                          class="el-icon-s-comment"></i></router-link>
                    </el-col>
                    <el-col :span="2" style="color: red">{{ data.price / 1000 }}k</el-col>
                  </el-row>
                </el-col>
                <el-col class="company-info">
                  <el-row>
                    <el-col>
                      <el-tag size="mini" type="info">{{ data.address }}</el-tag>
                      <el-tag size="mini" type="info" style="margin-left: 10px">{{ data.education }}</el-tag>
                      <el-tag size="mini" type="info" style="margin-left: 10px">{{ data.type }}</el-tag>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col class="company-bottom">
                  <el-row type="flex">
                    <el-col :span="2">
                      <el-avatar v-if="data.logo === null" icon="el-icon-office-building" shape="square"
                                 :size="20"></el-avatar>
                      <el-avatar v-else :src="server + data.logo" shape="square" :size="20"></el-avatar>
                    </el-col>
                    <el-col style="font-size: 13.5px">
                      <router-link class="link" :to="{name: 'Details', query: {name: data.company}}">{{
                          data.company
                        }}
                      </router-link>
                    </el-col>
                    <el-col style="font-size: 13.5px" :span="4">
                      <el-tag effect="plain" type="info" size="mini">{{ data.status }}</el-tag>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </el-main>
      <el-footer>
        <el-button class="any-button" type="success" @click="queryCareers" plain>查看更多</el-button>
      </el-footer>
      <!-- 入驻企业 -->
      <el-header class="company-online-header">入驻企业</el-header>
      <el-main class="company-online-main">
        <div class="company-box-card">
          <el-card class="company-box-card-children" v-for="(data,index) in frontend.jobs" :key="index" shadow="hover">
            <el-row class="company-box-card-info" type="flex">
              <el-avatar :src="server + data.logo" fit="fill" shape="square" :size="45"></el-avatar>
              <el-col class="company-box-card-info-col">
                <el-row>
                  <router-link class="link" :to="{name: 'Details', query: {name: data.company}}">{{
                      data.company
                    }}
                  </router-link>
                </el-row>
                <el-row class="company-box-card-info-col-row" type="flex" justify="left">
                  <el-col :span="24">{{ data.address }}</el-col>
                  <el-col>{{ data.scale }}</el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-empty v-if="data.jobs.length === 0" description="该企业暂未发布职位"></el-empty>
            <el-row class="job-list" v-else>
              <el-col class="job-list-col" v-for="job in data.jobs">
                <el-row type="flex">
                  <el-col>
                    <router-link :to="{name: 'Info', query: {id: job.id}}" class="link">{{ job.job_name }}<i
                        class="el-icon-s-comment"></i></router-link>
                  </el-col>
                  <el-col :span="2" style="color: red">{{ job.job_price / 1000 }}k</el-col>
                </el-row>
                <el-row>
                  <el-tag size="mini" type="info">{{ job.job_address }}</el-tag>
                  <el-tag size="mini" type="info" style="margin-left: 10px">{{ job.job_experience }}</el-tag>
                  <el-tag size="mini" type="info" style="margin-left: 10px">{{ job.job_education }}</el-tag>
                  <el-tag size="mini" type="info" style="margin-left: 10px">{{ job.job_type }}</el-tag>
                </el-row>
              </el-col>
              <el-col class="job-any-button">
                <el-button class="company-jobs-button" size="small" type="success"
                           @click="queryAnyCareers(data.company)" plain>查看更多职位
                </el-button>
              </el-col>
            </el-row>
          </el-card>
        </div>
      </el-main>
      <el-footer>
        <el-button class="any-button" type="success" @click="queryFirms" plain>查看更多</el-button>
      </el-footer>
    </el-container>
    <el-dialog
        title="预览"
        :visible.sync="previewDialogVisible"
        width="900px"
        append-to-body
        :close-on-click-modal="false"
        :before-close="handlePreviewDialogClose"
    >
      <div v-loading="previewDialogLoading">
        <v-md-preview :text="previewContent.content"></v-md-preview>
      </div>
    </el-dialog>
    <el-dialog :title="anyNoticeTitle" :visible.sync="anyNoticeVisible" width="950px" :close-on-click-modal="false">
      <el-form :model="conditions" size="mini" label-width="50px" label-position="right">
        <el-row type="flex" justify="space-between">
          <el-col>
            <el-form-item label="标题" prop="notice_title">
              <el-input v-model="conditions.notice_title" maxlength="25" placeholder="请输入标题" clearable/>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="时间" prop="create_time">
              <el-date-picker
                  v-model="conditions.create_time"
                  type="daterange"
                  format="yyyy-MM-DD" value-format="yyyy-MM-DD"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="操作" >
              <el-button
                  icon="el-icon-search"
                  type="primary"
                  @click="innerQuery"
                  size="mini"
                  :loading="anyNoticeLoading"
              >
                搜索
              </el-button>
              <el-button
                  icon="el-icon-refresh"
                  @click="reset"
                  size="mini"
                  :loading="anyNoticeLoading"
              >
                重置
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="dialog-card" v-loading="anyNoticeLoading">
        <el-card shadow="hover" style="border-radius: 15px">
          <div slot="header">{{ anyNoticeTitle }}</div>
          <div v-for="notice in frontendNotice" :key="notice.id" class="text item">
            <el-row type="flex" justify="space-between">
              <div style="width: 75%;overflow: hidden;">
                <el-button class="link" type="text" style="width: 95%;" @click="handlePreviewNotice(notice.id)">
                  <div style="text-overflow:ellipsis;white-space: nowrap;overflow: hidden;text-align: left">
                    {{ notice.notice_title }}
                  </div>
                </el-button>
              </div>
              <div style="font-size: 14px;display: flex;align-items: center">
                <i class="el-icon-date">{{ msToDate(notice.create_time).withoutTime }}</i>
              </div>
            </el-row>
          </div>
        </el-card>
      </div>
      <el-row type="flex" justify="center" style="margin-top: 30px" v-show="frontendNoticeTotal !== 0">
        <el-pagination
            background
            layout="prev, pager, next"
            :total="frontendNoticeTotal"
            @current-change="handleCurrentChange"
            :current-page="conditions.currentPage" :page-size="conditions.size">
        </el-pagination>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>

import {mapGetters} from "vuex";
import {msToDate} from "@/utils/format";

export default {
  name: "Dashboard",
  data() {
    return {
      server: window.application.minio_host,
      previewDialogVisible: false,
      previewDialogLoading: false,
      previewContent: {
        id: '',
        notice_id: '',
        content: ''
      },

      anyNoticeTitle: "",
      anyNoticeVisible: false,
      anyNoticeLoading: false,
      anyNoticeInnerVisible: false,
      anyNoticeInnerLoading: false,
      conditions: {
        notice_title: "",
        create_time: [],
        type: "",
        size: 10,
        currentPage: 1
      },
    }
  },
  computed: {
    ...mapGetters(['frontend', 'frontendNotice', 'frontendNoticeTotal']),
  },
  mounted() {
    this.getFrontendList();
  },
  methods: {
    msToDate,
    getFrontendList() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.$store.dispatch("frontend/getFrontendData")
          .catch((error) => this.$message.error(error))
          .finally(() => {
            loading.close()
          })
    },
    queryAnyCareers(name) {
      this.$router.push({path: '/details', query: {name}})
    },
    queryCareers() {
      this.$router.push("/career")
    },
    queryFirms() {
      this.$router.push("/company")
    },
    handlePreviewNotice(id) {
      this.previewDialogVisible = true
      this.previewDialogLoading = true
      this.$store.dispatch('frontend/getPreviewNewsContent', id)
          .then((resp) => {
            this.previewContent = resp.data.data
            setTimeout(() => {
              this.previewDialogLoading = false
            }, 1500)
          }).catch((error) => {
        this.$message.error(error)
      })
    },
    handlePreviewDialogClose() {
      this.previewContent = {
        id: '',
        notice_id: '',
        content: ''
      }
      this.previewDialogVisible = false
      this.previewDialogLoading = false
    },
    openAnyNotice(type) {
      if (type === 'notice') {
        if (this.frontend.notices.length <= 4) {
          this.$message.warning("列表已是所有公告")
          return
        }
        this.anyNoticeTitle = "更多公告"
        this.anyNoticeVisible = true
        this.conditions.type = "notice"
        this.sendQuery("公告")
      } else if (type === 'inform') {
        if (this.frontend.informs.length <= 4) {
          this.$message.warning("列表已是所有通知")
          return
        }
        this.anyNoticeTitle = "更多通知"
        this.anyNoticeVisible = true
        this.conditions.type = "inform"
        this.sendQuery("通知")
      }
    },
    reset() {
      this.conditions = {
        notice_title: "",
        create_time: [],
        type: "",
        size: 10,
        currentPage: 1
      }
      this.innerQuery()
    },
    innerQuery() {
      let type = this.anyNoticeTitle.replace("更多","")  === "公告" ? "notice" : "inform"
      this.conditions.type = type
      this.sendQuery(type)
    },
    sendQuery(type) {
      this.anyNoticeLoading = true
      this.$store.dispatch("frontend/getAllNotice", this.conditions)
          .then((resp) => {
            // if (resp) this.$message.success(type + "获取成功")
          }).catch((error) => {
        this.$message.error(type + "获取失败 " + error)
      }).finally(() => {
        setTimeout(() => {
          this.anyNoticeLoading = false
        }, 1500)
      })
    },
    handleCurrentChange(val) {
      this.conditions.currentPage = val
      this.innerQuery()
    },
  }
}
</script>

<style scoped lang="css">

.dashboard {
  background: linear-gradient(to bottom, #dfeef1, 1%, white);
}

.row-title {
  height: 130px;
  background-color: #26b2b2;
}

.career-online {
  align-items: center;
  margin-top: 20px;
}

.career-online-header, .company-online-header {
  font-size: 32px;
  font-weight: 600;
  margin-top: 50px;
}

.career-online-main, .company-online-main {
  width: 72%;
}


.tab-pane {
  display: flex;
  flex-wrap: wrap;
}

/* 下划线颜色 */
::v-deep .el-tabs__active-bar {
  background-color: #56b2b2;
}

/**选中 */
::v-deep .el-tabs__item.is-active {
  color: #26b2b2;
  font-weight: 600;
  opacity: 1;
}

/*
  悬浮
  ::v-deep .el-tabs__item:hover {
  color: #26b2b2;
  cursor: pointer;
  opacity: 1;
}
 */

.company-box-card {
  display: flex;
  flex-wrap: wrap;
}

.company-box-card .company-box-card-children:nth-child(2), .company-box-card-children:nth-child(5), .company-box-card-children:nth-child(8) {
  margin: 0 17px 0 17px;
}

.tab-pane .box-card:nth-child(2), .box-card:nth-child(5), .box-card:nth-child(8) {
  margin: 0 17px 0 17px;
}

.box-card {
  width: 379px;
  height: 138px;
  border-radius: 20px;
  margin-bottom: 17px;
  background: linear-gradient(#f4fafa 100%, #fdfdfd 0%) no-repeat 1px 100px;
}

.company-box-card-children {
  width: 379px;
  height: 390px;
  border-radius: 20px;
  margin-bottom: 17px;
  background: linear-gradient(to bottom, #f4fafa 20%, #ffffff 0%) no-repeat
}

.job-info {

}

.company-info {
  margin-top: 10px;
}

.company-bottom {
  margin-top: 36px;
}

.link {
  text-decoration: none;
  color: black;
}

.link:hover {
  color: #28b8b8;
}

.any-button {
  width: 170px;
  background-color: #dbecef;
  color: #28b8b8;
  border: none;
}

.any-button:hover {
  color: white;
  background-color: #28b8b8;
}

.any-button:focus {
  color: white;
  background-color: #28b8b8;
}

.company-box-card-info {
  position: relative;
  bottom: 4px;
}

.company-box-card-info-col {
  position: relative;
  margin-left: 15px;
  width: 60%;
  font-size: 17px;
}

.company-box-card-info-col a {
  text-decoration: none;
  color: #222222;
}

.company-box-card-info-col-row {
  font-size: 13px;
  color: #939393;
  margin-top: 3px;
}

.job-list {
  margin-top: 30px;
}

.job-list-col {
  margin-bottom: 17px;
  height: 65px;
  display: flex;
  flex-wrap: wrap;
  flex-flow: column;
  justify-content: space-evenly;
}

.job-any-button {
  display: flex;
  justify-content: center;
}

.company-jobs-button {
  width: 140px;
  border-radius: 8px;
  background-color: white;
  border: #28b8b8 1px solid;
  color: #28b8b8;
}

.company-jobs-button:hover {
  border: none;
  background-color: #28b8b8;
  color: white;
}

.company-jobs-button:focus {
  background-color: #28b8b8;
}

.career-route {
  line-height: 130px;
}

@media screen and (max-width: 1600px) {
  .company-box-card .company-box-card-children:nth-child(2), .company-box-card-children:nth-child(5), .company-box-card-children:nth-child(8) {
    margin: 0;
  }

  .tab-pane, .company-box-card {
    justify-content: space-around;
  }

  .box-card, .company-box-card-children {
    width: 340px;
  }

  .tab-pane .box-card:nth-child(2), .box-card:nth-child(5), .box-card:nth-child(8) {
    margin: 0;
  }
}

@media screen and (max-width: 1055px) {

}

.notice {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.notice .notice-card {
  width: 480px;
  min-width: 410px;
  //margin-top: 50px;
  margin: 50px 20px 0;
}

.notice .notice-card ::v-deep .el-card__header {
  background: linear-gradient(90deg, #f5fcfc 0, #fcfbfa 100%);
}

.dialog-card ::v-deep .el-card__header {
  background: linear-gradient(90deg, #f5fcfc 0, #fcfbfa 100%);
}
</style>
